<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addText(){
				let div=document.createElement("div")
				div.innerHTML="文字节点"
				document.querySelector(".con").appendChild(div)
				
			}
			function addImage(){
				let img=document.createElement("img")
				img.setAttribute("src","../../src/ok.png")
				document.querySelector(".con").appendChild(img)
			}
			function deleteText(){
				let text=document.querySelector(".con>div:nth-of-type(1)")
				text.parentNode.removeChild(text)
			}
			function deleteimage(){
				let image=document.querySelector(".con>img")
				image.parentNode.removeChild(image)
			}
			function deletefirst(){
				let div=document.querySelector(".con")
				div.removeChild(div.firstChild)
			}
			function deletelast(){
				let div=document.querySelector(".con")
				div.removeChild(div.lastChild)
			}
		</script>
	</head>
	<body>
		<button onclick="addText()">添加文本</button>
		<button onclick="addImage()">添加图片</button>
		<button onclick="deleteText()">删除第一个文本</button>
		<button onclick="deleteimage()">删除第一个图像</button>
		<button onclick="deletefirst()">删除第一个孩子</button>
		<button onclick="deletelast()">删除最后一个孩子</button>
		<div class="con"></div>
	</body>
</html>
